<template>
  <div class="Home">
    <scroller class="scroller">
      <banner-slider :imageList="bannerList"></banner-slider>
      <div class="moduleBox">
        <div class="module_item" v-for="(item,index) in tenModule">
          <image :src="item.icon" class="module_img"></image>
          <text class="module_text">{{item.title}}</text>
        </div>
      </div>

      <div class="baoyoubox" v-for="(item) in indexcolumnIconConfig">
        <div v-if="item.layoutType!=='activity'" class="title_box">
          <div v-if="item.keyForSearch=='99by'" :class="{'baoyouBg':item.keyForSearch=='99by'}"
               class="left ">
            <image class="baoyou_bg"
                   src="https://www.zetianhui.xyz/wxStatic/img/index_category_background_01.png"></image>
            <div>
              <text class="item_title">{{item.title}}</text>
              <text class="item_title_desc">{{item.subTitle}}</text>
            </div>
          </div>
          <div v-if="item.keyForSearch=='cnxh'" :class="{'baoyouBg':item.keyForSearch=='cnxh'}"
               class="left">
            <image class="baoyou_bg"
                   src="https://www.zetianhui.xyz/wxStatic/img/index_category_background_02.png"></image>
            <div>
              <text class="item_title">{{item.title}}</text>
              <text class="item_title_desc">{{item.subTitle}}</text>
            </div>
          </div>
          <div class="item-right_box">
            <div class="item-right_sub">
              <text class="item-right">更多</text>
            </div>
          </div>
        </div>
        <div v-if="item.layoutType=='activity'" class="">
          <image style="width:750px;height:150px" :src="item.icon"></image>
        </div>
        <div v-if="item.layoutType!=='activity'">

          <row-list v-if="item.layoutType=='columnSlide'" :item="jiujiuitem" :key="i"
                    v-for="(jiujiuitem,i) in jiujiubaoyoulist"></row-list>

          <div v-if="item.layoutType=='twoRow'" class="like_list_box">
            <two-row-list @toDetails="onToGoodsDetails" v-if="item.layoutType=='twoRow'" :item="cnxhitem" :key="i2"
                          v-for="(cnxhitem,i2) in cnxhList"></two-row-list>
          </div>
        </div>
      </div>
    </scroller>
  </div>
</template>

<style scoped>
  /*ten module start*/

  .title_box {
    height: 140px;
    background-color: #eee;
    padding-left: 28px;
    padding-right: 28px;
    color: #fff;
    flex-direction: row;
    align-items: center;
  }

  .left {
    width: 500px;
    height: 100px;
    padding-left: 105px;
    flex-grow: 0;
    align-items: center;
    justify-content: center;
  }

  .baoyou_bg {
    width: 500px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
  }

  .item_title {
    font-size: 26px;
    font-weight: 500;
    color: #fff;
  }

  .item_title_desc {
    font-size: 24px;
    color: #fff;
  }

  .item-right_box {
    flex: 1;
    justify-content: flex-end;
    align-items: flex-end;
  }

  .item-right_sub {
    width: 76px;
    height: 76px;
    background-color: #66b0ff;
    border-radius: 50px;
    color: #fff;
    flex-grow: 0;
    align-items: center;
    justify-content: center;
    /*margin-left:120px;*/
  }

  .item-right {
    font-size: 24px;
    color: #fff;
  }

  .like_list_box {
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    background-color: #eee;
    padding-left: 10px;
    padding-right: 10px;
  }

  .scroller {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .moduleBox {
    width: 750px;
    border-top-width: 22px;
    border-top-color: #eee;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 22px;
  }

  .module_item {
    width: 150px;
    flex-grow: 0;
    align-items: center;
    margin-bottom: 25px;
  }

  .module_img {
    width: 95px;
    height: 95px;
  }

  .module_text {
    text-align: center;
    font-size: 24px;
    color: #454545;
    margin-top: 10px;
  }

  /*ten module end*/
</style>
<script>

  const navigator = weex.requireModule('navigator');
  import BannerSlider from '@/assets/components/Slider'
  import twoRowList from '@/assets/components/commen/twoRowList'
  import ajax from '@/assets/js/ajax'
  import Utils from '@/assets/js/util'
  import {
    GETTOPGOODCATE,
    GETBANNER,
    URI_GETMODULE,
    URI_INDEXCOLUMNICONCONFIG,
    URI_GETLAYOUTTYPELIST
  } from "./const/shareUri";

  export default {
    components: {BannerSlider, twoRowList},
    data: () => ({

      navList: [],
      bannerList: [],
      tenModule: [],
      indexcolumnIconConfig: [],
      jiujiubaoyoulist: [],
      cnxhList: []
    }),
    created() {
      this.getGoodCate()
      this.getbanner();
      this.getModule();
      this.getcolumnIconConfig();
    },
    methods: {
      //10大模块下面的
      getcolumnIconConfig() {
        ajax.get(URI_INDEXCOLUMNICONCONFIG, {}, res => {
          console.log('10大模块下面的');
          console.log(res);
          this.indexcolumnIconConfig = res.data;
          console.log(this.indexcolumnIconConfig)
          this.indexcolumnIconConfig.forEach((val) => {
            if (val.layoutType !== 'activity') {
              let size = val.pageSize;
              //console.log(val.keyForSearch);
              switch (val.keyForSearch) {
                case '99by':
                  this.getLayoutTypeList(val.keyForSearch, size);
                  break;
                case 'cnxh':
                  this.getLayoutTypeList(val.keyForSearch, size);
                  break;
                default:

              }
            }
          })
        });
      },
      getLayoutTypeList(key, size) {
        ajax.get(URI_GETLAYOUTTYPELIST, {
          isIndex: 1,
          key: key,
          queryType: '',
          price: '',
          orderByTitle: '',
          orderBy: '',
          page: 1,
          reqPageSize: size
        }, res => {
          if (key == '99by') {
            this.jiujiubaoyoulist = res.data.data;
          } else if (key == 'cnxh') {
            this.cnxhList = res.data.data;
          }
        })
      },
      //navList
      getGoodCate() {
        ajax.get(GETTOPGOODCATE, {}, res => {
          this.navList = res.data;
          this.navList.forEach((val) => {
            val.title = val.cateName
            console.log(val.cateName);
          });
          this.navList.unshift({title: '精选', id: 0});
        })
      },
      // get banner
      getbanner() {
        ajax.get(GETBANNER, {}, res => {
          console.log('bannner');
          console.log(res.data);
          this.bannerList = res.data;
        });
      },
      //get tenModule
      getModule() {
        ajax.get(URI_GETMODULE, {}, res => {
          this.tenModule = res.data;
          console.log(this.tenModule);
        });
      },

      /**/
      onToGoodsDetails(val) {
        var url = Utils.setBundleUrl('pages/goodsDetail.js');
        console.log(url);
        navigator.push({
          url:url,
          animated:'true'
        })
      },
    }
  };
</script>